<template>
  <div style="margin-bottom: 50px">
    <div style="overflow: auto; clear: both; text-align: right;" class="navbar">
      <img :src="require('/src/assets/icon02.svg')" style="width:30px; height:30px;margin-right: 20px"/>
      <div style="float: right; margin: 5px">
        <span style="margin-right: 20px">
          <router-link to="/home" :class="{'selected-gradient-text': isHomeActive, 'unselected-text': !isHomeActive}">首页</router-link>
        </span>
        <span style="margin-right: 20px">
          <router-link to="/about" :class="{'selected-gradient-text': isAboutActive, 'unselected-text': !isAboutActive}">关于我</router-link>
        </span>
        <span>
          <router-link to="/contact" :class="{'selected-gradient-text': isContactActive, 'unselected-text': !isContactActive}">联系我</router-link>
        </span>
      </div>
    </div>
    <router-view/>
    <el-footer>
      <p>Footer</p>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "myLayout",
  data() {
    return {
      isHomeActive: false,
      isAboutActive: false,
      isContactActive: false,
    };
  },
  watch: {
    '$route.path'(newPath) {
      this.updateActiveClass(newPath);
    },
  },
  created() {
    this.updateActiveClass(this.$route.path);
  },
  methods: {
    updateActiveClass(path) {
      switch (path) {
        case '/home':
          this.isHomeActive = true;
          this.isAboutActive = false;
          this.isContactActive = false;
          break;
        case '/about':
          this.isHomeActive = false;
          this.isAboutActive = true;
          this.isContactActive = false;
          break;
        case '/contact':
          this.isHomeActive = false;
          this.isAboutActive = false;
          this.isContactActive = true;
          break;
        default:
          this.isHomeActive = false;
          this.isAboutActive = false;
          this.isContactActive = false;
      }
    }
  },
}
</script>

<style scoped>
/* 定义渐变色文本效果 */
.selected-gradient-text {
  color: transparent; /* 设置文本颜色为透明 */
  background: -webkit-linear-gradient(#F5C90D, #CD072C); /* 渐变色背景 */
  -webkit-background-clip: text; /* 将背景应用到文本 */
  -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 定义未选中的文本效果 */
.unselected-text {
  color: #fff; /* 设置文本颜色为白色 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
</style>
